<template>
    <div
        :class="[$hasEditPermission('/BHView') ? '' : 'maskDisabled1', contentData.noDataFlg && !contentData.addFlg ? 'maskDisabled1' : '']">
        <div class="tabs-cps-view"
            :class="[$hasEditPermission('/BHView') ? '' : 'maskDisabled2', contentData.noDataFlg && !contentData.addFlg ? 'maskDisabled2' : '']">
            <div class="tabs-cps-view">
                <div class="row">
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_1") }}
                        </div>
                        <el-date-picker v-model="contentData.xSsnDate" type="month" class="ipt" placeholder=" "
                            :clearable="false" :format="timeFormat" :value-format="timeFormat" @change="dateChange">
                        </el-date-picker>
                    </div>
                    <div class="item">
                        <!-- <div class="label">
                    {{ $t("message.rightMessage.tab2.label_2") }}
                </div>
                <div class="radio-view">
                    <el-radio
                        :key="index"
                        v-for="(item, index) in distinguishRadioData"
                        v-model="contentData.actuKbn"
                        :label="index"
                        >{{ item }}</el-radio
                    >
                </div> -->
                    </div>
                </div>

                <div class="row">
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_5") }}
                        </div>
                        <el-select v-model="contentData.oxCodName"
                            :class="(contentData && contentData.xSsnDate) ? 'ipt orange' : 'ipt orange'" placeholder=" "
                            @change="changeValue">
                            <el-option v-for="item in wrkClsListData" :key="item.label" :label="item.label"
                                :value="item.label">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_6") }}
                        </div>
                        <el-select v-model="contentData.cxCodName" class="ipt" placeholder=" ">
                            <el-option v-for="item in clnClsListData" :key="item.label" :label="item.label"
                                :value="item.label">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div class="row">
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_7") }}
                        </div>
                        <el-select v-model="contentData.ixCodName" class="ipt" placeholder=" ">
                            <el-option v-for="item in icdWrkListData" :key="item.label" :label="item.label"
                                :value="item.label">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div class="row" style="border-bottom: 1px solid #d9d9d9; margin-bottom: 12px">
                    <div class="item long-item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_8") }}
                        </div>
                        <el-input v-model="contentData.xConCts3" class="ipt long-ipt"
                            @input="contentData.xConCts3 = $setMaxLength(contentData.xConCts3, 1000)"></el-input>
                    </div>
                </div>

                <div class="tip">
                    <span>工事内容のコピー</span>
                    <el-button @click="GetOffer(1)">標準</el-button>
                    <el-button @click="GetOffer(2)">前回</el-button>
                </div>

                <div class="row">
                    <div class="item long-item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_9") }}
                        </div>
                        <el-input type="textarea" :rows="4" placeholder=" " v-model="contentData.xConCts1"
                            @input="contentData.xConCts1 = $setMaxLength(contentData.xConCts1, 1000)"
                            class="textarea long-ipt"></el-input>
                    </div>
                </div>

                <div class="row">
                    <div class="item long-item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_10") }}
                        </div>
                        <el-input type="textarea" :rows="4" placeholder=" " v-model="contentData.xConCts2"
                            @input="contentData.xConCts2 = $setMaxLength(contentData.xConCts2, 1000)"
                            class="textarea long-ipt"></el-input>
                    </div>
                </div>

                <div class="row">
                    <div class="item long-item">
                        <div class="label">
                            {{ $t("message.rightMessage.tab2.label_11") }}
                        </div>
                        <el-input type="textarea" :rows="4" placeholder=" " v-model="contentData.xIspCts1"
                            @input="contentData.xIspCts1 = $setMaxLength(contentData.xIspCts1, 1000)"
                            class="textarea long-ipt"></el-input>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getResOfferEjectData, GetOfferStandardPrevious } from "@/api/api";
import base from '@/utils/base.js'
import tools from '@/utils/tools.js'
import eventBus from "@/eventBus/bus";
import BASE from '@/utils/base';
import _ from 'lodash-es';
import { getLocalStorage } from "../../../../utils/storage";

export default {
    name: "Tab_2",
    props: {
        offerComboxData: Object,
        tableSelectRow: Object,
    },
    data() {
        return {
            userData: getLocalStorage('userData'),
            value: "",
            radio: "1",
            options: [],
            optionsValue: "",
            textarea: "",
            dateValue: "",

            distinguishRadioData: [],
            clnClsListData: [],
            wrkClsListData: [],
            icdWrkListData: [],
            ispRstListData: [],
            dpsTypeListData: [],

            contentData: {},
            oldContentData: {},
            // timeFormat: base.IP.indexOf("eng") == -1 ?  "yyyy-MM" : "MM-yyyy" 
            timeFormat: "yyyy-MM",

            WrkClsCode: '',
            startData: null
        };
    },
    components: {},

    computed: {
        macCodeValue() {
            return this.$store.state.macCode;
        },
    },
    watch: {
        offerComboxData(nVal) {
            this.initDatas();
        },

        tableSelectRow: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                console.log(newV, oldV)
                //如果列表不为空并且，不是tabs切换就加载
                this.dateValue = this.tableSelectRow ? this.tableSelectRow.ssn_date : '';
                if (newV != 'listEmpty' && oldV) {
                    // this.contentData = [];
                    this.getResOfferEjectDataApi();
                }
                if (newV == 'listEmpty') {
                    console.log("列表为空")
                    this.save();
                }
                // this.getResOfferEjectDataApi();
                // if (this.isEmptyObject(this.$store.state.MSC_Info)) {
                // 	this.getResOfferEjectDataApi();
                // } else {
                // 	this.contentData = this.$store.state.MSC_Info;
                // }
            },
        },

        macCodeValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.getResOfferEjectDataApi();
            },
        },

        contentData: {
            deep: true,
            handler: function (newV, oldV) {
                // console.log(newV)
                localStorage.setItem("E_MST", JSON.stringify(newV))
                // console.log(JSON.parse(localStorage.getItem("E_MST")))
                // this.contentData = JSON.parse(localStorage.getItem("E_MST"));
                // this.$store.commit("changeMSC_Info", newV);
                if (newV.ssnDate == '') {
                    this.$emit("changeBTN", true)
                } else {
                    this.$emit("changeBTN", false)
                }

                // console.log(_.isEqual(newV, this.startData));
                // if (_.isEqual(newV, this.startData)) {
                //     this.$store.state.isStop.flg = false;
                // } else {
                //     this.$store.state.isStop.flg = true;
                // }

                //	某些未null的值，在输入，并删除后会成”“比较=》失败
                Object.keys(newV).forEach((key) => {
                    if (newV[key] == '') {
                        this.startData[key] = '';
                    }
                    if (key == 'addFlg' || key == 'noDataFlg' || key == 'OldActuKbn' || key == 'actuKbn') {
                        this.startData[key] = newV[key];
                    }
                })

                if (Object.keys(newV).length != Object.keys(this.startData).length) {
                    this.$emit('DataChangeFn', true)
                    return
                }


                console.log("tab2", newV, this.startData);

                this.$emit('DataChangeFn', !_.isEqual(newV, this.startData))
            },
        },

    },
    methods: {
        initDatas() {
            this.distinguishRadioData = this.offerComboxData.distinguish;
            this.clnClsListData = this.offerComboxData.clnClsList;
            this.wrkClsListData = this.offerComboxData.wrkClsList;
            this.icdWrkListData = this.offerComboxData.icdWrkList;
            this.ispRstListData = this.offerComboxData.ispRstList;
            this.dpsTypeListData = this.offerComboxData.dpsTypeList;
        },
        changeValue(e) {
            console.log(this.$store.state.MSC_Info.oxCodName)
            this.WrkClsCode = this.getKey(e);
        },
        GetOffer(type) {
            this.GetOfferStandardPreviousApi(type);
        },
        GetOfferStandardPreviousApi(ExecType) {
            console.log(this.WrkClsCode);
            console.log(JSON.parse(localStorage.getItem("E_MST")).oxCodName)

            let dataJson = {
                ExecType,
                DmgCode: this.$store.state.macCode || 0,
                WrkClsCode: this.getKey(JSON.parse(localStorage.getItem("E_MST")).oxCodName) || 0,
                XssnDate: this.contentData.xSsnDate,
                SsnDate: this.contentData.ssnDate,
            };
            GetOfferStandardPrevious(dataJson).then((res) => {
                console.log(res.data)
                if (res.data.code != 0) {
                    this.$alert(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });
                    return
                }
                let temp = tools.changeNull(res.data.data[0]);
                this.contentData.xConCts1 = temp.fortificationContent1;
                this.contentData.xConCts2 = temp.fortificationContent2;
                this.contentData.xConCts3 = temp.fortificationContent3;
                this.contentData.ispCts = temp.ispCts;

                console.log(this.contentData);
            })
        },

        getResOfferEjectDataApi() {
            this.$emit("changeType", 1)
            this.contentData.actuAble = "enable"
            this.contentData.actuKbn = 0
            this.contentData.cCodName = ""
            this.contentData.cntPln = ""
            this.contentData.conCts1 = ""
            this.contentData.dCodName = ""
            this.contentData.conCts2 = ""
            this.contentData.conCts3 = ""
            this.contentData.cxCodName = ""
            this.contentData.iCodName = ""
            this.contentData.ispCts1 = ""
            this.contentData.ixCodName = ""
            this.contentData.oCodName = ""
            this.contentData.oxCodName = ""
            this.contentData.rcodName = ""
            this.contentData.ssnDate = ""
            this.contentData.summary = ""
            this.contentData.xConCts1 = ""
            this.contentData.xConCts2 = ""
            this.contentData.xConCts3 = ""
            this.contentData.xIspCts1 = ""
            this.contentData.xSsnDate = ""
            let temp = {
                dmgCode: this.$store.state.macCode || 0,
                ssnDate: this.dateValue,
                PltCode: this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,

            };

            // temp.dmgCode = 18886;
            // temp.ssnDate = "2071-04";

            getResOfferEjectData(temp).then((res) => {
                console.log(res);
                if (res.data.code == -300) {
                    this.startData = _.cloneDeep({});
                }
                if (res.data.code == 0 && res.data.data.length > 0) {
                    this.contentData = res.data.data[0];
                    this.contentData.OldXssnDate = this.contentData.xSsnDate;
                    this.contentData.OldSsnDate = this.contentData.ssnDate;
                    this.WrkClsCode = this.getKey(this.contentData.oxCodName);
                    localStorage.setItem("E_MST", this.contentData);

                    this.startData = _.cloneDeep(this.contentData);
                    // let tempDate = this.contentData.ssnDate;
                    // // 年-月
                    // var r0 = tempDate.match(
                    // 	/^([0-9]{4}|[0-9]{2})-([0]?[1-9]|[1][0-2])$/
                    // );

                    // // 月-年
                    // var r1 = tempDate.match(
                    // 	/^([0]?[1-9]|[1][0-2])-([0-9]{4}|[0-9]{2})$/
                    // );

                    // if(r0 && !r1)
                    // 	this.timeFormat = "yyyy-MM";
                    // else if(!r0 && r1)
                    // 	this.timeFormat = "MM-yyyy";

                }
            });
        },
        getKey(str) {
            var result;
            this.wrkClsListData.forEach((i, v) => {
                if (i.label == str) {
                    result = i.key;
                }
            });
            return result;
        },
        isEmptyObject(obj) {
            for (var key in obj) {
                return false;
            }
            return true;
        },
        dateChange(val) {
            console.log(`dateChange(${this.dateValue})`);
            //     this.getResOfferEjectDataApi();
        },
    },
    created() { },
    mounted() {
        this.initDatas();
        if (localStorage.getItem("E_MST") == '' || !localStorage.getItem("E_MST")) {
            getResOfferEjectDataApi();
        } else {
            this.contentData = JSON.parse(localStorage.getItem("E_MST"));
            this.startData = _.cloneDeep(this.contentData);
        }
        eventBus.$on("isGetNewForMSC", () => {
            this.getResOfferEjectDataApi();
        })

        if (this.$store.state.MSC_Info.oxCodName != '') {
            this.WrkClsCode = this.getKey(this.$store.state.MSC_Info.oxCodName)
        }

        if (BASE.IP == "http://192.168.33.200:8085") {
            this.timeFormat = "yyyy-MM";
        } else if (BASE.IP == "https://eng-dev-api.a-mis.com") {
            this.timeFormat = "MM-yyyy";
        } else if (BASE.IP == "https://demoapi.richtechcn.com") {
            this.timeFormat = "yyyy-MM";
        }
    },
    beforeDestroy() {
        this.startData = _.cloneDeep({});
    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.tabs-cps-view {
    width: 100%;

    .row {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;

        .item {
            width: 48%;
            display: flex;
            justify-content: flex-start;

            .label {
                min-width: 95px;
                display: flex;
                align-items: center;
            }

            // .right-view {
            //   width: calc(100% - 94px);
            // }
        }

        .long-item {
            width: 100%;

            .long-ipt {
                width: calc(100% - 103px);

                ::v-deep .el-input__inner {
                    width: 100%;
                    height: 32px;
                }
            }
        }
    }

    .tip {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 16px;
        padding-right: 10px;

        button {
            // background: #ffffff;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            padding: 5px 24px;
            font-weight: 400;
            // color: rgba(0, 0, 0, 0.75);
            margin-left: 16px;
        }
    }
}

.radio-view {
    width: 218px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ipt {
    width: 218px;
    height: 32px;

    ::v-deep .el-input__inner {
        width: 218px;
        height: 32px;
    }

    ::v-deep .el-input__inner:focus {
        border: 1px solid #dcdfe6;
    }

    ::v-deep .el-input__icon {
        line-height: 32px;
        color: #909399;
    }

    ::v-deep .el-input__suffix {
        width: 32px;
        right: 0;
        background: #dee0e3;
    }
}

.picker {
    width: 130px;

    ::v-deep .el-input__inner {
        width: 130px;
    }

    ::v-deep .el-input__suffix {
        background: transparent;
    }
}

.orange {
    ::v-deep .el-input__inner {
        background: #ffdeac;
    }
}

.yellow {
    ::v-deep .el-input__inner {
        background: #ffffe1;
    }
}

.textarea {
    ::v-deep .el-textarea__inner {
        resize: none;
        // background: #ffffe1;
    }
}
</style>
